<template>
	<div>
		<div class="pb10px">
			<el-form ref="searchForm" :model="searchForm" inline>
				<el-form-item label="试卷名称" prop="name">
					<el-input v-model="searchForm.name" clearable placeholder="请输入试卷名称"></el-input>
				</el-form-item>
				<el-form-item label="">
					<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜 索</el-button>
					<el-button icon="el-icon-refresh-left" @click="resetForm">重 置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
		<div class="bigbox">
			<div class="examBox" v-for="item in listData">
				<div style="display: flex;flex-direction: row;">
					<div style="color: #409EFF;margin-left: -11px;">
						<i class="el-icon-tickets" style="font-size: 100px;"></i>
					</div>
					<div style="display: flex;flex: 1;flex-direction: column;justify-content: space-between;">
						<div class="titleBox">
							<div class="tikuWord">
								<div>{{item.name}}</div>
								<div style="color:#409EFF;cursor: pointer;margin-left: 10px;">
									<i class="el-icon-edit-outline" title="修改名称" @click="getExamBank(item.id)"></i>
								</div>
								<div style="color:#409EFF;cursor: pointer;margin-left: 10px;">
									<i class="el-icon-delete" title="删除试卷" @click="deleteBank(item.id)"></i>
								</div>
							</div>
							<div>
								<el-button type="primary" @click="intoQuestionsBank(item.id,item.name)">查看试卷</el-button>
							</div>
						</div>
						<div style="display: flex;margin-top: 10px;">
							<div class="yellowBox">
								分数:{{item.score}}
							</div>
							<div class="yellowBox">
								总题数:{{item.count}}
							</div>
							<div class="blueBox">
								考试时长:{{item.examTime}}/分钟
							</div>
							<div class="blueBox">
								提前交卷时间:{{item.handTime}}/分钟
							</div>
						</div>
					</div>
				</div>
				<div class="createBox">
					<div>
						创建人:{{item.userName}}
					</div>
					<div>
						创建时间:{{item.recordTime}}
					</div>
				</div>
			</div>
		</div>
		<!-- 修改对话框 -->
		<el-dialog title="修改" :visible.sync="dialogFormVisible" width="20%">
			<el-form :model="updateList">
				<el-form-item label="请输入修改后的名称">
					<el-input v-model="updateList.name" placeholder="输入字数为1-20个字"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="updateExamBank()">确 定</el-button>
			</div>
		</el-dialog>
		<div style="margin-top: 20px">
			<el-pagination @current-change="currentChange" @size-change="sizeChange" :page-size="pageInfo.pageSize"
				:current-page="pageInfo.currentPage" background layout="sizes, prev, pager, next" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import utils from "@/utils/utils";

	export default {
		data() {
			return {
				//抽屉控制
				dialogFormVisible: false,
				//列表数据
				listData: [],
				boxList: [{
						id: 1,
						name: '单项选择题',
						num: 10
					},
					{
						id: 2,
						name: '多项选择题',
						num: 5
					},
					{
						id: 3,
						name: '判断题',
						num: 10
					},
					{
						id: 4,
						name: '填空题',
						num: 3
					},
					{
						id: 5,
						name: '简答题',
						num: 1
					}
				],
				//总条数
				total: 0,
				//分页详情
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				inputValue: {
					name: ''
				},
				singeId: {
					id: ''
				},
				//搜索
				searchForm: {
					name: ""
				},
				updateList: {
					id: '',
					name: ''
				},
				formData: {},
				//删除数据的id
				ids: [],
				userInfo: utils.getUserInfo(),
				questionType: [
					"单项选择题",
					"多项选择题",
					"判断题",
					"填空题",
					"简答题"
				],
				selectList: [
					"A：",
					"B：",
					"C：",
					"D：",
				],
				defaultList: [
					"A：",
					"B：",
					"C：",
					"D：",
				],
			}
		},

		created() {
			this.getPageList()
		},
		methods: {
			//获取分页数据
			getPageList() {
				let data = Object.assign(this.searchForm, this.pageInfo)
				this.$axios.get("/examPaper/page", {
					params: data
				}).then(res => {
					console.log(res)
					this.listData = res.data.data
					this.total = res.data.total
					this.listData.forEach(item=>{
						if(item.questionId != null){
							item.count = item.questionId.split(',')
							item.count = item.count.length
						}else{
							item.count = 0
						}
						
						// item.count = item.count.length
					})
				})
			},
			updateExamBank() {
				this.$axios.put("/examPaper/update", this.updateList).then(res => {
					console.log('修改', res)
					if (res.code == 200) {
						this.getPageList()
						this.$message.success("修改成功!")
						this.dialogFormVisible = false
					} else {
						this.$message.error('修改失败')
					}

				})
			},
			getExamBank(id) {
				this.updateList.id = id
				this.$axios.get("/examPaper/getById?id=" + id).then(res => {
					console.log(res.data.name)
					this.updateList.name = res.data.name
					this.dialogFormVisible = true

				})
			},
			intoQuestionsBank(id,name) {
				this.$router.push({
					path: '/examPaperBank',
					query:{
						id:id,
						name:name
					}
				})
			},
			resetForm() {
				this.$refs['searchForm'].resetFields();
			},
			//选择分页
			currentChange(e) {
				this.pageInfo.pageNum = e
				this.getPageList()
			},
			//改变分页数量
			sizeChange(e) {
				this.pageInfo.pageSize = e
				this.getPageList()
			},
			//搜索
			handleSearch() {
				this.pageInfo.pageNum = 1
				this.getPageList()
			},
			//添加数据
			handleAdd(id) {
				// console.log(id)
				this.$prompt('请输入试卷名称', '新增', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputPattern: /^.{1,40}$/,
					inputErrorMessage: '输入格式有误',
					inputPlaceholder: '输入字数为1-20个字'
				}).then(({
					value
				}) => {
					console.log(value)

					this.inputValue.name = value
					this.$axios.post("/examPaper/add", this.inputValue).then(res => {
						console.log('新增', res)
						this.$message({
							type: 'success',
							message: '创建成功'
						});
						this.getPageList()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消创建'
					});
				});
			},
			//单个删除
			deleteBank(id) {
				let ids = []
				ids.push(id)
				console.log(ids)
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete("/examPaper/delBatch",{data:ids}).then(res => {
						console.log(res)
						if(res.code == 200)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.getPageList()
					})
					
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	};
</script>

<style scoped>
	.examBox {
		width: 48%;
		height: 150px;
		border: 1px solid #409EFF;
		border-radius: 5px;
		margin: 20px 0px;
		padding: 15px 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: white;
	}

	.createBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 14px;
	}

	.tikuWord {
		font-size: 18px;
		display: flex;
		flex-direction: row;
	}
	
	.yellowBox{
		height: 35px;
		line-height: 35px;
		margin: 10px 10px 10px 0px;
		padding: 0 10px;
		font-size: 0.8rem;
		background-color: #3b7cec;
		color: white;
	}
	
	.redBox{
		height: 35px;
		line-height: 35px;
		margin: 10px 10px 10px 0px;
		padding: 0 10px;
		font-size: 0.8rem;
		background-color: #fee9ea;
		border-color: #fdd3d5;
		color: #f5222d;
	}

	.blueBox {
		height: 35px;
		line-height: 35px;
		margin: 10px 10px 10px 0px;
		padding: 0 10px;
		font-size: 0.8rem;
		background-color: #ebf2fd;
		border-color: #d8e5fb;
		color: #3b7cec;

	}

	.greenBox {
		height: 35px;
		line-height: 35px;
		margin: 10px 10px 10px 0px;
		text-align: center;
		padding: 0px 10px;
		font-size: 0.8rem;
		background-color: #22d39a;
		border-color: #dbf9f0;
		color: white;
	}

	.titleBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.bigbox {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
</style>
